<template>
  <div class="videoBox">
    <video
        ref="videoPlayer"
        class="video-js"
        @canplay="getTotalTime"
        @timeupdate="timeUpdate"
    >
    </video>
    <!-- 自定义控件 -->
    <div class="controlBar">
      <div class="progressBar" @mousedown="isDraging = true" @mouseup="isDraging = false">
        <el-slider
            v-model="currentTimeVal"
            :max="totalTimeVal"
            :format-tooltip="timeFormat"
            @change="progressUpdate"
        >
        </el-slider>
      </div>
      <div class="controlBtnBox">
        <div class="left">
          <i
              :class="[isPaused ? 'el-icon-video-play' : 'el-icon-video-pause']"
              class=" icon-size"
              @click="togglePlay()"
          >
          </i>
          <span>{{currentTime}}/{{totalTime}}</span>
        </div>
        <div class="right">
          <i class="el-icon-d-arrow-left icon-size" @click="back(player.currentTime())"></i>
          <i class="el-icon-d-arrow-right icon-size" @click="forward(player.currentTime())"></i>
          <i class="el-icon-bell icon-size"  @click="toShowVolumeBar"></i>
          <div id="volumeBar" v-show="isShowVolumeBar">
            <el-slider
                v-model="volume"
                vertical
                height="100px"
                @input="changeVolume"
            >
            </el-slider>
          </div>
        </div>
        <div class="rateBox">
          <span @click="toShowOptions">{{ratedisplay}}</span>
          <div class="rateOptions" v-show="isShowRateOptions">
                    <span
                        v-for="(r,index) in rateOptions"
                        :key="index"
                        @click="setPlayRate(r)"
                    >
                        {{r}}x
                    </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
export default {
  name:'videoPlayer',
  //接收来自父组件videoComponent的video的具体配置信息,这样可以实现对VideoPlayer组件的复用
  props:{
    options: {
      type: Object
    }
  },
  //用计算属性来实现当速率为1时，显示“倍速”
  computed:{
    ratedisplay(){
      if(this.rate == 1){
        return '倍速'
      }else{
        return this.rate + 'x'
      }
    }
  },
  data(){
    return{

      player:null,
      //当前播放速率
      rate:1.0,
      //播放速率
      rateOptions:[2.0,1.75,1.5,1.0,0.75,0.5],
      //显示速率选项和音量选项
      isShowRateOptions:false,
      isShowVolumeBar:false,
      //音量
      volume:30,
      //是否暂停
      isPaused:true,
      //当前播放时间点和视频总时长
      currentTime:'00:00:00',
      totalTime:'00:00:00',
      //进度条的当前值，必须为number类型
      currentTimeVal:0,
      //进度条最大值，必须为number类型
      totalTimeVal:0,
      //是否在拖到进度条
      isDraging:false
    }
  },
  methods:{
    createVideoPlayer(){
      this.player = this.$videoJS(this.$refs.videoPlayer,this.options)
    },
    //显示速率选项
    toShowOptions(){
      this.isShowRateOptions = !this.isShowRateOptions
    },
    toShowVolumeBar(){
      this.isShowVolumeBar = !this.isShowVolumeBar
    },
    //视频时长格式化
    timeFormat(time){
      let hour = Math.floor(time / 3600),
          minute = Math.floor((time % 3600) / 60),
          second = Math.floor(time % 60);
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return `${hour}:${minute}:${second}`;
    },
    //获取视频的总时长和进度条最大值
    getTotalTime(){
      this.totalTime = this.timeFormat(this.player.duration())
      this.totalTimeVal = Math.floor(this.player.duration())
    },
    //改变速率
    setPlayRate(rate){
      this.rate = rate;
      this.player.playbackRate(rate);
      this.isShowRateOptions = false;
    },
    //控制视频的播放与暂停
    togglePlay(){
      console.log()
      this.isPaused = !this.isPaused
      if(!this.isPaused){
        this.player.play()
      }else{
        this.player.pause()
      }
    },
    //更新视频当前播放时间
    timeUpdate(){
      //如果当前正在拉到进度条，先停止更新当前播放时间，直接return结束这个函数
      //没有这一句会出现拉动进度条跳转失败的bug
      if(this.isDraging) return

      this.currentTime = this.timeFormat(this.player.currentTime())
      this.currentTimeVal = this.player.currentTime()
      //当前时间更新到等于总时长时，要改变视频的播放状态按钮
      if(this.currentTime === this.totalTime){

        this.isPaused = true
      }
    },
    //进度条拉动时更新进度条值并从拉到的位置播放
    progressUpdate(val){
      this.player.currentTime(val)
      // 虽然mouseup已经可以改变isDraging的值，但下面这句不能少，不然视频播放结束再点击播放时，进度条不会回到最开始位置
      this.isDraging = false
    },
    //改变音量
    changeVolume(val){
      this.volume = val
      //由于h5规定volum的值在0-1之间，所以这里要对获取到的val做一个处理(滑块的val是从0-100)
      this.player.volume(val / 100)
    },
    //快进
    forward(ct){
      this.progressUpdate(ct + 10)
    },
    //后退
    back(ct){
      this.progressUpdate(ct - 10)
    }

  },
  mounted(){
    this.createVideoPlayer()
  },
  beforeDestroy(){
    if(this.player){
      this.player.dispose()
    }
  }
}
</script>

<style scoped>
.videoBox{
  box-sizing: border-box;
  position: relative;
  width: 800px;
  height:500px;
  background-color: rgb(73, 156, 128);
}
.controlBar{
  width: 90%;
  height: 55px;
  position:absolute;
  bottom: 20px;
  left: 5%;
  background-color:#817f7f5a;
  box-sizing: border-box;
  color: rgb(233, 231, 231);
}
.progressBar{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: 10px;
  height: 10%;
  /* background-color: aliceblue; */
}
.controlBtnBox{
  box-sizing: border-box;
  width: 100%;
  height:60%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
/* 以下强行修改了el-slider样式 */
.progressBar /deep/ .el-slider__bar{
  height: 3px;
  background-color: #409EFF;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}
.progressBar /deep/ .el-slider__button{
  height: 8px;
  width: 8px;
}
.progressBar /deep/ .el-slider__runway{
  margin-top:1px;
  margin-bottom: 1px;
  height: 3px;
}
.progressBar /deep/.el-slider__button-wrapper{
  width: 28px;
  height: 33px;
}
.icon-size{
  font-size: 25px;
  cursor: pointer;
}
.left{
  padding-left:10px ;
  width: 50%;
  display: flex;
  align-items: center;
}
.left span{
  margin-left: 20px;
}
.right{
  width: 15%;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.right i{
  display: block;
}
#volumeBar{
  width: 30px;
  height: 120px;
  background-color: #817f7f5a;
  position: absolute;
  top:-150px;
  right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rateBox{
  width: 15%;
  cursor: pointer;
}
.rateOptions{
  width: 80px;
  height: 180px;
  background-color: #817f7f5a;
  position: absolute;
  top:-185px;
  right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.rateOptions span{
  display: block;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.rateOptions span:hover{
  background-color: #cec9c95a;
  color: #409EFF;
}
</style>